<template>
     <div id="app" class="con">
            <div class="item1"></div>
            <div class="item2"></div>
            <div class="item3"></div>
    </div>
</template>

<script>
export default {
    data(){
      return{}
            },
            methods: {
            }
}
</script>
<style scoped>
.con{
    display: flex;
    height: 350px;
     background: rgb(138, 140, 156);
     flex-direction: row;
     align-items:center;
     justify-content:center;
}
.item1{
    background: rgb(79, 106, 255);
    height: 100px;
    width:100px ;
    border: 1px solid rgb(0, 0, 0);
}
.item2{
    background: rgb(1, 207, 53);
    height: 200px;
    width:200px ;
    border: 1px solid rgb(0, 0, 0);
}
.item3{
    background: rgb(223, 88, 182);
    height: 300px;
    width:300px ;
    border: 1px solid rgb(0, 0, 0);
}
</style>
